<template>
  <div class="main">
        <h3 style="text-align:center;line-height:50px;">waterghost-账号注册</h3>
      
      <label>名称：</label>
      <input v-model="name" type="text"/>
      <label>密码：<a href="javascript:;" @click="look=!look">查看密码</a></label>
      <input  v-model="password" :type="look?'text':'password'"/>
         <label>手机号码：</label>
      <input v-model="phone" type="text">
      <label>验证码：
        <el-badge  :value="getCode?outime:''" class="item">
        <el-button v-if="getCode==false" @click="getCodem" size="mini" type="warning">获取验证码</el-button>
        </el-badge>
      </label>
      <input v-model="code" type="text" style="width:100px">
      <label>使者令牌(可空)：</label>
      <input type="text">
      <label style="display: inline-block;">头像：</label>
      <br>
     <div class="header l" style="display: inline-block;margin-top:10px">
        <el-avatar :size="60" src="https://empty" @error="errorHandler">
            <input type="file" multiple name="file" ref="addimg" @change="uploadHeader">
            <img :src="header"/>
        </el-avatar>
     </div><br>
      <label class="l" style="display: inline-block;">性别：</label>  
      <el-radio v-model="sex" label="1" style="display: inline-block;">男</el-radio>
      <el-radio v-model="sex" label="0" style="display: inline-block;">女</el-radio>    
     <br>
        <el-button type="warning" size="small" style="margin-top:20px;" @click="regUser">注册</el-button>
  </div>
</template>

<script>
import qs from "qs"
export default {
 data(){
        return{
            look:false,
            getCode:false,
            outime:60,
            phone:null,
            code:null,
            sex:"1",
            name:null,
            password:null,
            header:"https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png"
        }
    },
    methods:{
       
        regUser(){

          var obj = {
              userName:this.name,
              userSex:this.sex,
              userPassword:this.password,
              userPhone:this.phone,
              userHeader:this.header,
              code:this.code
          }  
          this.$http.put("/user/reguser",qs.stringify(obj)).then(va=>{
              this.$alert(va.data.message)
              if(va.data.code==200){
                  // 提交百度收录
                            this.$http.post("http://data.zz.baidu.com/urls?site=https://www.waterghost.cn&token=19Atd4Ln7ZEUP8Mz",
                            "https://www.waterghost.cn/personcenter/"+va.data.data
                            ).then(va =>{console.log(va)})
                  this.$router.push("/")
              }
          })
        },
        uploadHeader(){
            
            var file = this.$refs.addimg.files[0]
            
            if(file.type.split("/")[0]!="image"){this.$alert("仅支持 jpg png gif 格式文件");return}
            let parm = new FormData();
            parm.append('file',file,file.name);
            parm.append('chunk','0')
            let config ={
                   headers: { 'Content-Type': 'multipart/form-data' }
            }
            this.$http.post("/file/noautehuploadFile",parm,config).then(va=>{
                if(va.data.code==200){
                    this.$alert(va.data.message)
                    this.header=va.data.data
                }else if(va.data.code==301){
                    this.$alert(va.data.message)
                    this.$router.push("/")
                }else{
                    this.$alert(va.data.message)
                }

            })
        },
        getCodem(){
            this.getCode=true
            // 发送短信
            this.$http.get("/user/sendcode/"+this.phone).then(va =>{
                this.$alert(va.data.message)
            })
            // 开启时间倒计时
            var timout = setInterval(()=>{
                if(this.outime<=0){
                    clearInterval(timout)
                    this.outime=60
                    this.getCode=false
                }
                this.outime--
            },1000)
        }
    },
    created(){
  
    }
}
</script>

<style scoped>
    .main{
        width: 100px;
        height: 300px;
        padding: 10px;
        border-radius: 8px;
        box-shadow: 1px 1px 1px 1px rgb(112, 111, 111);        
    }
    label{
        
        display: block;
        font-family: ht;
        margin-top: 10px;
        margin-bottom: 10px;
    }
    input{
        width: 100%;
        height: 30px;
        outline: none;
        padding-left: 10px;
        border-radius: 5px;
        border: none;
        /* background: #ebb563; */
        border: 1px solid #dad9d9;
    }
    .header{
        width: 100px;
        height: auto;
        position: relative;
        
    }
    .header input{
        width: 100%;height: 100%;opacity: 0;z-index: 3;position: absolute;top: 0;left: 0;
    }
     @media  screen and (max-width: 1300px) {
         .l{
             display: block !important;
         }
         .main{
             width: 100% !important;
         }
     }

</style>